<template>
  <div class='noticeSwiper'>
    <div v-if="total>0">
      <div class="type" >
        <span>社区服务指南</span>
        <span @click="goCommunityGuide">查看全部<i class="iconwhole iconfont icon-youjiantou"></i></span>
      </div>
        <ul style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content:space-between;padding:0 .2rem 1.5rem;">
          <li @click="guide(list.id,list.name)" style="border-radius: .1rem;box-shadow: -1px 1px 2px 2px #ddd;width: calc(50% - .1rem);margin-bottom:.2rem;" v-for="(list,index) in message" :key="index">
            <div class='noticeSwiper-img-box'>
              <img class="noticeSwiper-img" v-if="list.image" :src="host+list.image" alt="" >
              <img class="noticeSwiper-img" v-else src="../../../assets/images/defaultImg.jpg" alt="">
            </div>
            <div class="noticeSwiper-content">
              <div class="noticeSwiper-list">
                <span class="noticeSwiper-tittle">{{list.name}}</span>
                <span class="guide-time">{{list.createtime | formatTime}}</span>
              </div>
           </div>
          </li>
        </ul>
    </div>
  </div>
</template>
<script>
import api from '../../../api/api.js'
  export default{
  filters: {
    formatTime: function time(value) {
    var now = new Date(value * 1000);
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }
  },
    props:{
      message:{
        type:Array
      },
      total:{
        type:Number
      }
    },
    data(){
      return{
        listData:[],
        host:api.host
      }
    },
    mounted(){

    },
    methods:{
    // 指南列表
    guide(id,name){
      this.$get(api.serviceList, {
        params: {
          category_id: id
        }
      })
      .then((response) => {
        this.listData = response.data.data.list
        if(this.listData.length>0){
          const id = response.data.data.list[0].id
          this.$router.push({
            path: '/communityGuideDtl',
            query: {
              id
            }
          })
        }else{
          this.$toast(name+'后台未添加内容！')
        }

      })
      .catch((error) => {
        console.log(error)
      });
    },
      toGuideList(id){
        this.$router.push({
          path: '/communityGuide',
          query: {
            id
          }
        })
      },
      goCommunityGuide(){
        this.$router.push('/communityType')
      }
    },
    components: {

    }
  }
</script>
<style scoped>
.guide-list{
  background: #fff;
  margin: .25rem .3rem 0;
  border-bottom:1px solid #ccc;
}
.guide-listBox{
  height: auto;
  display: flex;
  color: #000;
}
.guide-img{
  flex:1;
}
.guide-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.guide-content{
  flex:2;
  font-weight: bold;
}
.guide-title{
  font-size: .3rem;
  margin: .1rem 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.guide-time{
  display: block;
  color: #FD5585;
  margin: .1rem 0;
}

.noticeSwiper{
  display: flex;
}
.noticeSwiper-img-box{
  height: 1.5rem;
  overflow: hidden;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .1rem .1rem 0 0;
}
.swiper-slide{
  /* border:.02rem solid #fff; */
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .3rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #000;
  height: 1rem;
  font-weight: bold;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  font-size: .24rem;
  border-radius: 0 0 .2rem .2rem;
  background: #fff;
}
.noticeSwiper-list{
  position: relative;
  margin-left: .15rem;
  font-weight: bold;
}
.noticeSwiper-tittle{
  display: block;
  padding-top: .2rem;
  width: 88%;
  height: auto;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.noticeSwiper-time{
  display: block;
  margin-top: .1rem;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
  position: absolute;
  top: 0.8rem;
  right: 0rem;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>
